<template>
	<view class="logins">
		<nav-bars backState="2000"></nav-bars>
		<view class="tabsBox" :style="'top:'+navHeight+'px;'">
			<view class="s_cTabs">
				<view class="s_ctItem" v-for="(item,index) in carTypes" :class="{active:current==index}" :data-current="index" @tap="tabChange">{{item.name}}<text></text></view>
			</view>	
		</view>
		<view class="s_cCan">
			<swiper class="s_cSwiper" @change="swiperChange" :current="current">
				<!-- 客服 -->
				<!-- <swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="nextPage">
					  <view class="i-dcont" v-for="(item,index) in userListData.list" :key="index" @click="navto(`/pages_customer/pages/index?to=${item.user_im_account}&chat_id=${item.chat_id}&partner_id=${item.partner_id}&partner_type=${item.partner_type}`)">
						   <view class="i-img"><image :src="item.userInfo.headimg.path || 'https://cos.ryz1620.com/liankun/static/IMG280.png'"></image></view>
						   <view class="i-tit">
							   <text class="txtdate">{{getYMDHMS(item.last_time*1000)}}</text>
							   <text class="text1">{{item.userInfo.nickname}}</text>
							   <text class="text2">{{getLastMsgTxt(item)}}</text>
						   </view>
					  </view>
					  <view class="nolist" v-if="userListData.list==''">
						  <image :src="`${baseImg}/static/adminShop/ons.png`"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>
				</swiper-item> -->
				<!-- 评论 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="shopPage">
						<!-- <view class="l_cgItem" v-for="(item,index) in demoList" :key="index" @tap="toDetail(item.id)">
							<view class="l_cgImage"><image :src=" item.user_id.avatar.path"></image>
							 <view class="i_tBtn" @tap.stop="dviewr(item.display_url)" v-if="item.display_url">
								<view class="i_tbImg"><image src="@/static/home/3d.png"></image></view>
								<view class="i_tbTxt">3D</view>
							 </view>
							</view>
							<view class="l_cgCont">
								<view class="l_cgName omit-2">{{item.content}}</view>
								<view class="l_cgTags">
									<view class="l_cgTag"></view>
								</view>
								<view class="l_cg">
									<text class="l_cgF"><text>{{item.house_type}}</text></text>
								</view>
							</view>
						</view>	 --> 
						<view class="demoList">
							<view class="demoItem" v-for="(item,index) in demoList" :key="index">
								<image :src="item.user_id.avatar.path" mode=""></image>
								<view class="info">
									<view class="top">{{item.user_id.username}}<text>{{$utils.getTimeRelation(item.create_time*1000)}}</text></view>
									<view class="content">{{item.content}}<text class="iconfont iconhuaban44" @click.stop="delDemo(item.id)"></text></view>
								</view>
							</view>
						</view>
						<view class="nolist" v-if="demoList==''">
							<image :src="`${baseImg}/static/adminShop/ons.png`"></image>
							<text>暂无数据</text>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 通知 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="themePage">
					  <view class="p_dDyna">
						  <view v-for="(items,index) in themeList" :key="index" style="padding: 10rpx 25rpx; padding-top: 25rpx;" @click="toTarnd(items.id)">
						  	<view class="p_ddItem">
						  		<view class="p_ddTags">
						  			<view v-for="item in items.tags">
						  				<view class="p_ddTag">
						  					<view class="p_ddTag-icon"><image src="/static/common/icon_topic.png"></image></view>
						  					<text>{{item}}</text>
						  				</view>
						  			</view>
						  		</view>
						  		<view class="p_ddCont">
						  			<view class="p_ddText">
						  				<view>
						  					<view>{{items.title}}</view>
						  				</view>
						  			</view>
						  			<view class="p_ddImgs">
						  				<view v-for="item in items.media" @tap.stop="preview(index,items.media)">
						  					<view class="p_ddImg"><image :src="item.path"></image></view>
						  				</view>
						  			</view>
						  		</view>
						  		<view class="p_funs">
						  			<view class="p_fun">
						  				<view class="p_fIcon iconfont icon-transpond"></view>
						  				<text>{{items.forward_num}}</text>
						  			</view>
						  			<view class="p_fun">
						  				<view class="p_fIcon iconfont icon-comments"></view>
						  				<text>{{items.comment_num}}</text>
						  			</view>
						  			<view class="p_fun" >
						  				<view class="p_fIcon" v-if="items.support_status == 0"><image src="/static/common/icon_collection.png"></image></view>
						  				<view class="p_fIcon" v-else><image src="/static/common/icon_collection2.png"></image></view>
						  				<text>{{items.support_num}}</text>
						  			</view>
						  		</view>
						  	</view>
						  </view>
						  
					  </view>	
					  <view class="nolist" v-if="themeList==''">
						  <image :src="`${baseImg}/static/adminShop/ons.png`"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>	
				</swiper-item>
			</swiper>	
		</view>			
	</view>
</template>

<script>
// import navBar from "@/components/navBar/navBar.vue"
// import service_my from '@/service/my.js'
import service_mall from '@/service/mall.js'
import customeApi from '@/service/custome.js'
import URL from '@/config/url.js'
import service_decoration from '@/service/decoration.js'


export default {
	// components: { navBar },
	
	data() {
		return {
			baseImg: this.$static,
			carTypes:[
				// {
				//   name:'客服'
				// },
				{
				  name:'评论'
				},
				{
				  name:'通知'
				},
			],
			current:0,
			userListData:{
				loading:false,
				list:[],
				page:1,
				pagesize:1000
			},
			timData: {
				status: false,
				userID: '',
				userSig: '',
				to: ''
			},
			demoList:[],
			demoListpage:1,
			themeList:[],
			themepage:1,
			titList:[],
			titpage:1,
			pagesize:10,
			navHeight:88,
		}
	},
	created() {
		this.navHeight = uni.getStorageSync('StatusBarHeight').height
		this.getList()
		this.getDemoList()
	},
	onLoad() {
		
	},
	computed:{
		timMsg(){
			return this.$store.state.tim.msg
		},
	},
	watch: {
		timMsg(newVal,oldVal){
			if(newVal){
				let rei = this.userListData.list.findIndex(r=>r.user_im_account == newVal.from);
				if(rei === -1){
					this.getList()
				}else{
					this.$set(this.userListData.list[rei],newVal.last_time,newVal.time)
				}
			}
		}
	},
	methods: {
		// 获取评论列表
		getDemoList(){
			let sid = this.$store.state.index.sid
			let params = {
				decoration_id:sid,
				page:this.demoListpage,
				pagesize:this.pagesize
			}
			service_decoration.getDecoraComment(params).then(res=>{
				console.log(res,'设计师评论列表')
				if(res.code==1){
					// this.demoList = res.data?res.data:[],
					let data = res.data;
					for(let i = 0;i<data.length;i++){
						this.demoList.push(data[i])
					}
				}
			})
		},
		// 评论列表加载更多
		shopPage(){
			this.demoListpage++
			this.getDemoList()
		},
		//点击删除评论
		delDemo(id){
			uni.showModal({
				content:'确定删除该条评论吗？',
				success:res=>{
					if(res.confirm){
						service_decoration.delDecoraComment({comment_id:id}).then(res=>{
							console.log(res,'删除结果')
							if(res.code==1){
								this.demoListpage = 1
								this.demoList = []
								this.getDemoList()
								uni.showToast({
									title:'删除成功',
									icon:'success'
								})
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
						})
					}
				}
			})
		},
		navto(url){
			uni.navigateTo({
				url
			})
		},
		toTarnd(id){
			uni.navigateTo({ url: '/pages_design/pages/design/dynamic/dynamic?trendId=' + id})
		},
		toDetail(caseId) {
			uni.navigateTo({ url: '/pages_design/pages/design/demo/demo?caseId=' + caseId })
		},
		natos(item){
			uni.navigateTo({
				url:'/pages_mall/pages/mall/goods_details/goods_details?id=' + item.product_id
			})
		},
		tabChange(e){
				var index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current = index;
		},
		swiperChange(e) {
				var index = e.target.current || e.detail.current;
				this.current = index;		
		},
		getYMDHMS (timestamp) {
			let time = new Date(timestamp)
			let year = time.getFullYear()
			const month = (time.getMonth() + 1).toString().padStart(2, '0')
			const date = (time.getDate()).toString().padStart(2, '0')
			const hours = (time.getHours()).toString().padStart(2, '0')
			const minute = (time.getMinutes()).toString().padStart(2, '0')
			const second = (time.getSeconds()).toString().padStart(2, '0')
			
			// return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
			return hours + ':' + minute + ':' + second
		},
		getLastMsgTxt(item){
			if(!item || !item.msg_content){
				return ""
			}
			let msg_content = JSON.parse(item.msg_content);
			if(!msg_content){
				return ""
			}
			let Desc = JSON.parse(msg_content.Desc);
			if(!Desc){
				return ""
			}
			let format = Desc.format;
			if(!format){
				return ""
			}
			if(format == 'string'){
				return msg_content.Data || ""
			}
			return '系统消息'
		},
		nextPage(){
			this.customepage++
			this.getList()
		},
		getList(){
			console.log('resresres')
			this.userListData.page = this.userListData.page+1
			customeApi.getChatList({page:1,pagesize:this.userListData.pagesize}).then(res=>{
				console.log(res,'客服会话列表')
				if(res.code === 1){
					this.userListData.list = res.data.list
				}else{
					this.$utils.showErr({title: res.data.msg})
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.logins{
	position: relative;
	width: 100vw;height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.tabsBox{
	width: 100%;
	position: fixed;
	left: 0;
	z-index: 502;
}
.s_cTabs {height: 100rpx;position: relative;display: flex;z-index: 500;background: #fff;
	.s_ctItem {font-size: 30rpx;color: #939393;  display: flex;justify-content: center;align-items: center;flex: 1;
		&.active {font-weight: bold;position: relative;color: #303030;
		 text{
			width: 40rpx;height: 6rpx;border-radius: 4rpx 4rpx;background: #FFD425;position: absolute;bottom: 0;    left: 50%;margin-left: -20rpx;z-index: 1;; 
		 }
		}
	}
	.s_ctCursor {width: 40rpx;height: 8rpx;border-radius: 4rpx 4rpx;background: #ffd425;position: absolute;bottom: 0;left: 0;z-index: 1;transform: translateX(166rpx);}
}
.s_cCan{
	height: 100%;
	padding: 120rpx 24rpx 40rpx;
}
.estateItem {
	padding: 40rpx 30rpx;
	position: relative;
	width: 100%;
	height: 270rpx;
	display: flex;
	border-bottom: 2rpx solid #F4F4F4;

	.itemImg {
		overflow: hidden;
		width: 224rpx;
		height: 188rpx;
		margin-right: 24rpx;
		border-radius: 4rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 4rpx;
		}
	}

	.itemInfo {
		
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.infoTitle {
			width: 434rpx;
			font: 600 28rpx/48rpx PingFang SC;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.infoTime {
			font: 400 24rpx/40rpx PingFang SC;
			color: #333333;
		}

		span {
			font: 400 24rpx/48rpx PingFang SC;
			color: #FF615D;
		}
	}
}
.i-dcont{
	padding: 30rpx;
	min-height: 176rpx;
	padding-left: 150rpx;
	position: relative;
	.i-img{
		width: 104rpx;
		height: 104rpx;
		position: absolute;
		left: 30rpx;
		top:30rpx;
		border-radius: 50%;
		background: #f9f9f9;
		overflow: hidden;
	}
	.i-tit{
		line-height: 52rpx;
		padding-right: 140rpx;
		text{
			display: block;
		}
		.text1{
			font-size: 32rpx;
			color: #333333;
		}
		.text2{
			font-size: 24rpx;
			color: #939393;
		}
	}
	.i-mk{
		position: absolute;
		right: 30rpx;
		top:54rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 25rpx;
		border-radius: 30rpx;
		border: 1px #ccc solid;
		color: #939393;
	}
}
.itemInfo .i-mk{
		position: absolute;
		right: 30rpx;
		top:40rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 25rpx;
		border-radius: 30rpx;
		border: 1px #ccc solid;
		color: #939393;
	}
.nolist{
	margin-top: 200rpx;
	line-height: 80rpx;
	text-align: center;
	color: #939393;
}
.nolist image{
	display: block;
	width: 288rpx;
	height: 232rpx;
	margin: auto;
}
.s_dList{
	height: 100%;
	// 评论列表
	.demoList{
		background-color: #fff;
		.demoItem{display: flex;
			padding: 28rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
			image{
				flex-shrink: 0;
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 28rpx;
			}
			.info{
				width: 100%;
				font: 500 26rpx/40rpx PingFang SC;
				.top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #0A0605;
					text{
						font: 400 22rpx/20rpx PingFang SC;
						color: #A0A0A0;
					}
				}
				.content{
					display: flex;
					justify-content: space-between;
					color: #A0A0A0;
					margin-top: 12rpx;
					text{
						padding: 0 10rpx;
						justify-content: flex-end;
					}
				}
			}
		}
	}
}
.txtdate{
	position: absolute;
	right: 30rpx;
	color: #888;
}
.i_cList {padding: 0 32rpx;display: flex;}
		.i_cLeft {flex: 1;}
		.i_cLeft:first-child {padding-right: 12rpx;}
		.i_cLeft:last-child {padding-left: 12rpx;}
		.i_cRight {flex: 1;}
		.i_cItem {width: 100%;padding-bottom: 38rpx;border-radius: 8rpx;overflow: hidden;}
		.i_cImage {width: 100%;background: #f6f7fb;
			> image {height: 360rpx;}
		}
		.i_cTag {height: 44rpx;line-height: 44rpx;color: #a58f6d;font-size: 20rpx;padding: 0 16rpx 0 48rpx;margin: 16rpx 16rpx 0;border-radius: 22rpx;background: #f9f6f3;position: relative;display: inline-block;
			.i_ctIcon {width: 36rpx;height: 36rpx;position: absolute;top: 4rpx;left: 4rpx;}
		}
		.i_cText {line-height: 36rpx;font-size: 24rpx;margin: 16rpx 20rpx 0;}
		.i_cUser {margin: 16rpx 16rpx 0;}
		.i_cHead {width: 36rpx;height: 36rpx;margin-right: 8rpx;border-radius: 50%;background: #f6f7fb;float: left;overflow: hidden;}
		.i_cPraise {height: 36rpx;color: #939393;font-size: 20rpx;float: right;display: flex;align-items: center;}
		.i_cpIcon {width: 32rpx;height: 32rpx;margin: 0 8rpx;}
		.i_cName {height: 36rpx;line-height: 36rpx;color: #939393;font-size: 20rpx;overflow: hidden;}
// 装修案例
.l_dDemo {padding: 28rpx 0 40rpx;
	.l_ddItem {padding: 42rpx 0 40rpx;
		&:nth-child(1) {padding-top: 0;}
	}
	.l_ddBanner {height: 376rpx;margin: 0 32rpx;border-radius: 8rpx;background: #f0f0f0;overflow: hidden;position: relative;}
	.l_ddInfo {line-height: 34rpx;font-size: 24rpx;margin: 18rpx 32rpx 0;}
	.l_ddTag {height: 36rpx;line-height: 36rpx;color: #a98f68;font-size: 20rpx;padding: 0 20rpx;margin-top: -2rpx;margin-right: 16rpx;border-radius: 18rpx;background: #f9f6f3;float: left;}
	.l_ddCont {overflow: hidden;}
	.l_ddVal {display: flex;flex-wrap: wrap;align-items: center;}
	.l_ddCutLine {width: 1px;height: 12rpx;margin: 0 8rpx;background: #333;display: inline-block;
		&:nth-last-child(1) {display: none;}
	}
	.l_ddRemark {line-height: 44rpx;font-size: 32rpx;font-weight: bold;padding-left: 36rpx;margin-top: 8rpx;}
}
		.l_cgItem {margin: 32rpx 32rpx 0;background: #fff;border-radius: 8rpx;overflow: hidden;position: relative;}
		.l_cgImage {width: 180rpx;height: 180rpx;float: left;position: relative;}
		.l_cgCont {padding-left: 20rpx;overflow: hidden;}
		.l_cgName {min-height: 80rpx;line-height: 40rpx;}
		.l_cgTags {height: 32rpx;margin-top: 14rpx;display: flex;}
		.l_cgTag {height: 32rpx;line-height: 32rpx;font-size: 22rpx;color: #939393;padding-right: 24rpx;position: relative;
			&::after {content: "";width: 1px;height: 14rpx;background: #939393;position: absolute;top: 50%;right: 12rpx;transform: translateY(-50%) scaleX(.5);}
			&:last-child::after {content: none;}
		}
		.l_cgPrice {}
		.l_cgFee {color: #C3AB7C;font-size: 34rpx;font-weight:normal;padding-left: 4rpx;display: block;text-align: left;
			& > text {font-size: 32rpx;}
		}
		.l_cgCost {text-decoration: line-through;color: #939393;font-size: 14rpx;
			& > text {font-size: 18rpx;}
		}
		.l_cgSell {height: 32rpx;line-height: 32rpx;color: #939393;font-size: 22rpx;margin-top: 10rpx;}
.icond{
	    display: block;
	    width: 60rpx;
	    height: 60rpx;
	    position: absolute;
	    right: 0;
	    background: #F8F8F8;
	    border-radius: 50%;
	    bottom: 0;
	    text-align: center;
	    line-height: 60rpx;
}
		.l_cg{
			line-height: 40rpx;
			overflow: hidden;
			.l_cgF{
				color: #999;
			}
		}
	// 设计动态
	.p_dDyna {overflow: hidden;
		.p_ddItem {box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.15);border-radius: 15rpx; overflow: hidden;}
		// 用户信息
		.p_ddUser {padding: 0 32rpx;}
		.p_ddHead {width: 84rpx;height: 84rpx;margin-right: 20rpx;border-radius: 50%;background: #f0f0f0;overflow: hidden;float: left;}
		.p_ddCan {padding-top: 6rpx;overflow: hidden;}
		.p_ddName {height: 40rpx;line-height: 40rpx;font-weight: bold;}
		.p_ddTime {height: 34rpx;line-height: 34rpx;color: #939393;font-size: 24rpx;}
		// 标签
		.p_ddTags {margin: 18rpx 32rpx 0;overflow: hidden;}
		.p_ddTag {height: 44rpx;line-height: 44rpx;color: #a58f6d;font-size: 24rpx;padding: 0 20rpx 0 48rpx;border-radius: 22rpx;background: #f9f6f3;position: relative;float: left;}
		.p_ddTag-icon {width: 36rpx;height: 36rpx;position: absolute;top: 4rpx;left: 4rpx;}
		// 内容
		.p_ddText {line-height: 44rpx;margin: 28rpx 36rpx 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
		.p_ddAll {height: 36rpx;line-height: 36rpx;color: #a98f68;font-size: 26rpx;margin-top: 8rpx;position: relative;}
		.p_ddAll-click {width: 140rpx;height: 70rpx;position: absolute;top: -18rpx;left: -36rpx;}
		.p_ddImgs {padding: 18rpx 0 0 32rpx;overflow: hidden;}
		.p_ddImg {width: 205rpx;height: 205rpx;margin: 12rpx 14rpx 0 0;border-radius: 4rpx;background: #f0f0f0;overflow: hidden;float: left;}
		// 底部功能键
		.p_funs {padding: 20rpx 32rpx 22rpx;display: flex;			}
		.p_fun {height: 74rpx;display: flex;flex: 1;justify-content: center;align-items: center;
			&:nth-child(1) {justify-content: flex-start;}
			&:nth-last-child(1) {justify-content: flex-end;}
		}
		.p_fIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;color: #6c6c6c;font-size: 40rpx;margin-right: 16rpx;display: inline-block;}
	}		
.i_tBtn {width: 70rpx;height: 70rpx;background: rgba(0, 0, 0, .4);border: 1px solid #fff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}
.i_tbImg {width: 22rpx;height: 22rpx;margin: 15rpx auto 0;}
.i_tbTxt {width: 100%;height: 24rpx;line-height: 24rpx;text-align: center;color: #fff;font-size: 18rpx;position: absolute;top: 38rpx;left: 0;}			



</style>